<template>
	<view class="p-2">
		<view class="flex align-center justify-between">
			 
			<!-- 左边区域 -->
			<view class="flex align-center">
				<!-- 头像 -->
				<image :src="item.userpic" class="rounded-circle mr-2" style="width: 65rpx; heigth: 65rpx;  " lazy-load mode="widthFix"
				 @click="openSpace">
				</image>
				<!-- 昵称发布时间 -->
				<view>
					<view class="font" style="line-height: 1.1">
						{{ item.username }}
					</view>
					<text class="font-sm text-light-muted">{{ item.newstime }}</text>
				</view>
			</view>
			<!-- 右边关注区域 item.isfollow=false就是未关注-->
			<view @click="follow" v-if="!item.isFollow" class="flex align-center text-white rounded justify-center bg-main animate__animated animate__faster"
			 hover-class="animate__rubberBand" style="width: 90rpx; height: 50rpx">
				关注
			</view>
		</view>
		<!-- 标题 -->
		<view class="font-md my-2" @click="openDetail">
			{{ item.title }}
		</view>
		<!-- 有的说说没有图片  vif判断一下 -->
		<view @click="openDetail">
			<image v-if="item.titlepic" :src="item.titlepic" class="rounded w-100" style="height: 350rpx" mode="widthFix"></image>
		</view>
		<!-- 图标按钮 -->
		<view class="align-center flex">
			<!-- 点赞  :class="item.support.type='support' ? 'text-main':''"-->
			<view class="flex-1 flex align-center justify-center animated faster" hover-class="jello text-main"
			:class="item.support.type==='support' ? 'text-main':''"
			 @click="doSupport('support')">
				<text class="iconfont icon-dianzan2 m-2"></text>
				<text>{{item.support.support_count>0?item.support.support_count:'支持'}}</text>
			</view>
			<!-- 取消点赞 -->
			<!-- :class="item.support.type='unsupport' ? 'text-main':''" -->
			<view class="flex-1 flex align-center justify-center animated faster" hover-class="jello text-main" @click="doSupport('unsupport')"
			 :class="item.support.type==='unsupport' ? 'text-main':''" 
			>
				<text class="iconfont icon-cai m-2"></text>
				<text>{{item.support.unsupport_count > 0 ? item.support.unsupport_count :'反对'}}</text>
			</view>
			<view class="flex-1 flex align-center justify-center animated faster" hover-class="jello text-main">
				<text class="iconfont icon-pinglun2 m-2"></text>
				<text>1</text>
			</view>
			<view class="flex-1 flex align-center justify-center animated faster" hover-class="jello text-main">
				<text class="iconfont icon-fenxiang m-2"></text>
				<text>1</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: Object,
			index: Number,
		},
		data() {
			return {};
		},
		methods: {
			//点击头像进入
			openSpace() {
				console.log('进入个人空间')
			},
			openDetail() {
				// 点击标题和图片进入详情,点击评论和分享都是进入详情页
				console.log("进入详情");
			},
			// 控制关注
			follow() {
				this.$emit("follow", this.index);
			},
			// 控制点赞取消
			doSupport(type){
				console.log(type)
				this.$emit('doSupport',{
					type:type,
					index:this.index
				})
			}
		},
	};
</script>

<style>
</style>
